<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H08 | 实现常见的技术产品官网的页面架构及样式布局</title>
    <link type="text/css" rel="stylesheet" href="style/normalize.css"/>
    <link type="text/css" rel="stylesheet" href="style/style.css"/>
    <link type="text/css" rel="stylesheet" href="style/font-awesome.min.css"/>
</head>
<body>
    
    <a name="top"></a>
    <div class="container">
        <header>
            
            <div class="banner-left">
                <h1>新世界</h1>
            </div>
            <nav>
                <ul>
                    <li>首页</li>
                    <li>最新活动</li>
                    <li>项目介绍</li>
                    <li>爱心社区</li>
                    <li>关于我们</li>
                    <li class="move"></li>
                </ul>
            </nav>
            <div class="banner-right">
                <span>登录</span>
                <div class="move"></div>
            </div>
            
        </header>
        <section id="section-1">
            
            <div class="mes">
                <p>Time of new life</p>
                <p>新时代，年轻的人们让我们一起</p>
                <p>体验新生活，享受新生活</p>
                <span>开始体验</span>
            </div>
            
        </section>
        <section id="section-2">
            
            <div class="cell">
                <div class="img">
                    <img src="images/icon-3.jpg"/>
                </div>
                <div class="mes">
                    <p>打造全新世界观，让你更<br/>爱你的生活</p>
                </div>
            </div>
            <div class="cell">
                <div class="img">
                    <img src="images/icon-4.jpg"/>
                </div>
                <div class="mes">
                    <p>丰富多彩的公益活动，发<br/>挥新世界的主人公意识</p>
                </div>
            </div>
            <div class="cell">
                <div class="img">
                    <img src="images/icon-5.jpg"/>
                </div>
                <div class="mes">
                    <p>时尚的新理念，超前体验<br/>未知的生活</p>
                </div>
            </div>
            <div class="cell">
                <div class="img">
                    <img src="images/icon-6.jpg"/>
                </div>
                <div class="mes">
                    <p>完善的培养机制，培养你<br/>全新的世界观</p>
                </div>
            </div>
            
        </section>
        <section id="section-3">
            
            <div class="img">
                <img src="images/icon-1.png"/>
            </div>
            <div class="mes">
                <p>关于新世界，你不知道的还有什么？</p>
            </div>
            
        </section>
        <section id="section-4">

                <div class="mes">
                    <p>查找新世界城市活动信息</p>
                    <span></span>
                    <p>每个城市都有不同的活动信息，请自助查询您所需要了解的城市</p>
                </div>
                <input type="radio" name="select"/>
                <input type="radio" name="select"/>
                <input type="radio" name="select"/>
                <input type="submit"/ value=" 搜索"/>
                <div class="options">
                    <div class="select select-1">
                        <span>国家</span>
                        <div class="option">
                            <ul>
                                <li>中国</li>
                                <li>美国</li>
                            </ul>
                        </div>
                    </div>
                    <div class="select select-2">
                        <span>省份</span>
                        <div class="option">
                            <ul>
                                <li>北京市</li>
                                <li>天津市</li>
                                <li>河北省</li>
                                <li>陕西省</li>
                                <li>内蒙古自治区</li>
                                <li>辽宁省</li>
                            </ul>
                        </div>
                    </div>
                    <div class="select select-3">
                        <span>城市</span>
                        <div class="option">
                        </div>
                    </div>
                    <div class="select">
                        <span> </span>
                    </div>
                </div>
            
        </section>
        <section id="section-5">
            
            <div class="cell">
                <div class="img">
                    <img src="images/pic03.jpg"/>
                </div>
                <div class="mes">
                    <p>北京活动</p>
                    <p>新社区大联盟</p>
                </div>
            </div>
            <div class="cell">
                <div class="mes">
                    <p>上海活动</p>
                    <p>夜上海新景观探索</p>
                </div>
                <div class="img">
                    <img src="images/pic04.jpg"/>
                </div>
            </div>
            <div class="cell">
                <div class="img">
                    <img src="images/pic05.jpg"/>
                </div>
                <div class="mes">
                    <p>深圳活动</p>
                    <p>全新海岸线观点站</p>
                </div>
            </div>
            <div class="cell">
                <div class="img">
                    <img src="images/pic06.jpg"/>
                </div>
                <div class="mes">
                    <p>香港活动</p>
                    <p>奢侈消费大派送</p>
                </div>
            </div>
            
        </section>
        <section id="section-6">
            
            <div class="left">
                <div class="mes">
                    <p>新世界</p>
                    <p>TIME</p>
                    <p>@新世界-北京</p><br>
                    <p>2016.04.01</p>
                </div>
            </div>
            <div class="right">
                <div class="wrapper">
                    <input type="radio" name="list"/>
                    <input type="radio" name="list"/>
                    <input type="radio" name="list"/><br>
                    <div class="list"></div>
                    <div class="list"></div>
                    <div class="list"></div>
                    <div class="mes mes-1">
                        <p>新世界/<span>01</span></p>
                        <p>新世界？新世界？新世界？新世界？新世界？新世界？新世界？新世界？新世界？新世界？新世界？新世界？新世界？新世界？新世界？新世界？新世界？新世界？</p>
                    </div>
                    <div class="mes mes-2">
                        <p>新世界/<span>02</span></p>
                        <p>新世界。新世界。新世界。新世界。新世界。新世界。新世界。新世界。新世界。新世界。新世界。新世界。新世界。新世界。新世界。新世界。新世界。新世界。</p>
                    </div>
                    <div class="mes mes-3">
                        <p>新世界/<span>03</span></p>
                        <p>新世界！新世界！新世界！新世界！新世界！新世界！新世界！新世界！新世界！新世界！新世界！新世界！新世界！新世界！新世界！新世界！新世界！新世界！</p>
                    </div>
                    <div class="button">
                        <span>更多详情</span>
                    </div>
                </div>
            </div>
            
        </section>
        <section id="section-7">
            
            <div class="wrapper">
                <div class="cell">
                    <div class="mes">
                        <p>新时代</p>
                        <p>关于爱生活的我们</p>
                        <span></span>
                    </div>
                    <div class="button">
                        <span>查看更多</span>
                    </div>
                </div>
                <div class="cell">
                    <div class="mes">
                        <p>新时代</p>
                        <p>关于爱生活的我们</p>
                        <span></span>
                    </div>
                    <div class="button">
                        <span>查看更多</span>
                    </div>
                </div>
            </div>
            <div class="img"></div>
            
        </section>
        <section id="section-8">
            
            <div class="top">
                <div class="mes">
                    <p>成为我们的志愿者</p>
                    <span></span>
                    <p>新世界的大家庭需要每一个爱生活的人的人的加入，如果你够年轻，有梦想，有激情<br/>那就不要犹豫，快来加入我们，成为改变所有人生活的人</p>
                </div>
            </div>
            <div class="left">
                <div class="mes">
                    <p>新世界志愿者协议</p>
                    <p>加入新世界志愿者的人员必须遵守中华人民共和国的<br/>相关法律法规，并且本着平等的原则.......</p>
                    <span>∨ more</span>
                </div>
                <div class="mes">
                    <p>新世界志愿者协议</p>
                    <p>新世界志愿者享受新世界内部所有资源共享的权利，并<br/>且享受所在城市新世界活动的优先参与资格</p>
                    <span>∨ more</span>
                </div>
                <div class="mes">
                    <p>更多条款</p>
                    <span>∨ more</span>
                </div>
            </div>
            <div class="right">
                <form>
                    <input type="text" placeholder="姓名："/>
                    <input type="text" placeholder="年龄："/>
                    <input type="text" placeholder="联系方式："/>
                    <input type="text" placeholder="联系地址："/>
                    <textarea cols="30" rows="10" placeholder="请简单描述您梦想的生活："></textarea>
                    <input type="submit" value="提交申请"/>
                </form>
            </div>
            
        </section>
        <section id="section-9">
            
            <div class="mes">
                <p>联系我们</p>
                <p>为了更好的获取我们最新的产品资讯，您可以留下您的电子邮箱快速订阅我们的产品资讯<br/>也可以通过以下任何方式关注我们的动态</p>
            </div>
            <div class="text">
                <input type="email" placeholder="someone@email.com"/>
                <input type="submit" value=" 提交"/>
            </div>
            <div class="icon">
                <i class="fa fa-qq"></i>
                <i class="fa fa-weibo"></i>
                <i class="fa fa-twitter"></i>
                <i class="fa fa-globe"></i>
            </div>
            
        </section>
        <footer>
            <div class="mes">
                <span>@2016新世界</span>
            </div>
            <div class="back">
                <a href="#top">Back to top</a>
            </div>
        </footer>
    </div>
    
</body>
</html>